<template>
  <div class="LunBoClass">
    <el-carousel indicator-position="outside" height="625px">
      <el-carousel-item class="lunbo-1">
        <p class="font"><strong>智&nbsp; 慧&nbsp; 校&nbsp; 园</strong></p>
        <h3 class="font-s"><strong>Smart College</strong></h3>
        <div class="div1-1">
          <br/>
          <p class="font-nr">21213132132123</p>
          <span></span>
        </div>
      </el-carousel-item >

      <el-carousel-item class="lunbo-2">
        <div class="div1-2" style="background-color: white">
          <h3 v-if="hoverNub===0">12312332123132123</h3>
          <h3 v-else-if="hoverNub===1">i国际航空联合会客户</h3>
          <h3 v-else-if="hoverNub===2">啊实打阿发发士大夫</h3>
          <h3 v-else-if="hoverNub===3">大师傅士大夫山豆根规划</h3>
          <h3 v-else-if="hoverNub===4">h'd'f'g'gh'd'f'g'g'f'd</h3>
        </div>
        <el-row :gutter="20" :justify="'space-evenly'" style="margin-left: 10%;width: 550px;height: 50px;margin-top: 5%">
          <el-col style="background-color: white" :span="4">
            <el-tooltip placement="bottom" content="培训指导"><el-image :src="img_lunbo_2[0]" @mouseenter="hoverNub = 0"/></el-tooltip>
          </el-col>
          <el-col style="background-color: white" :span="4">
            <el-tooltip placement="bottom" content="定制"><el-image :src="img_lunbo_2[1]" @mouseenter="hoverNub = 1"/></el-tooltip>
          </el-col>
          <el-col style="background-color: white" :span="4">
            <el-tooltip placement="bottom" content="数字改造"><el-image :src="img_lunbo_2[2]" @mouseenter="hoverNub = 2"/></el-tooltip>
          </el-col>
          <el-col style="background-color: white" :span="4">
            <el-tooltip placement="bottom" content="文件"><el-image :src="img_lunbo_2[3]" @mouseenter="hoverNub = 3"/></el-tooltip>
          </el-col>
          <el-col style="background-color: white" :span="4">
            <el-tooltip placement="bottom" content="笔记"><el-image :src="img_lunbo_2[4]" @mouseenter="hoverNub = 4"/></el-tooltip>
          </el-col>
        </el-row>
      </el-carousel-item>

      <el-carousel-item class="lunbo-3">
        <div class="div1-3" style="background-color: white">
          <h3 v-if="hoverNub===0">12312332123132123</h3>
          <h3 v-else-if="hoverNub===1">i国际航空联合会客户</h3>
          <h3 v-else-if="hoverNub===2">啊实打阿发发士大夫</h3>
          <h3 v-else-if="hoverNub===3">大师傅士大夫山豆根规划</h3>
          <h3 v-else-if="hoverNub===4">h'd'f'g'gh'd'f'g'g'f'd</h3>
        </div>
        <el-row :gutter="20" :justify="'space-evenly'" style="margin-left: 50%;width: 550px;height: 50px;margin-top: 5%">
          <el-col style="background-color: white" :span="4">
            <el-tooltip placement="bottom" content="OA系统"><el-image :src="img_lunbo_3[0]" @mouseenter="hoverNub = 0"/></el-tooltip>
          </el-col>
          <el-col style="background-color: white" :span="4">
            <el-tooltip placement="bottom" content="教学评价"><el-image :src="img_lunbo_3[1]" @mouseenter="hoverNub = 1"/></el-tooltip>
          </el-col>
          <el-col style="background-color: white" :span="4">
            <el-tooltip placement="bottom" content="校历"><el-image :src="img_lunbo_3[2]" @mouseenter="hoverNub = 2"/></el-tooltip>
          </el-col>
          <el-col style="background-color: white" :span="4">
            <el-tooltip placement="bottom" content="考核"><el-image :src="img_lunbo_3[3]" @mouseenter="hoverNub = 3"/></el-tooltip>
          </el-col>
          <el-col style="background-color: white" :span="4">
            <el-tooltip placement="bottom" content="财务管理"><el-image :src="img_lunbo_3[4]" @mouseenter="hoverNub = 4"/></el-tooltip>
          </el-col>
        </el-row>
      </el-carousel-item>

      <el-carousel-item class="lunbo-4">
        <div class="div1-2" style="background-color: white">
          <h3 v-if="hoverNub===0">12312332123132123</h3>
          <h3 v-else-if="hoverNub===1">i国际航空联合会客户</h3>
          <h3 v-else-if="hoverNub===2">啊实打阿发发士大夫</h3>
          <h3 v-else-if="hoverNub===3">大师傅士大夫山豆根规划</h3>
          <h3 v-else-if="hoverNub===4">h'd'f'g'gh'd'f'g'g'f'd</h3>
        </div>
        <el-row :gutter="20" :justify="'space-evenly'" style="margin-left: 10%;width: 550px;height: 50px;margin-top: 5%">
          <el-col style="background-color: white" :span="4">
            <el-tooltip placement="bottom" content="就业"><el-image :src="img_lunbo_4[0]" @mouseenter="hoverNub = 0"/></el-tooltip>
          </el-col>
          <el-col style="background-color: white" :span="4">
            <el-tooltip placement="bottom" content="招生"><el-image :src="img_lunbo_4[1]" @mouseenter="hoverNub = 1"/></el-tooltip>
          </el-col>
          <el-col style="background-color: white" :span="4">
            <el-tooltip placement="bottom" content="推荐"><el-image :src="img_lunbo_4[2]" @mouseenter="hoverNub = 2"/></el-tooltip>
          </el-col>
          <el-col style="background-color: white" :span="4">
            <el-tooltip placement="bottom" content="测试"><el-image :src="img_lunbo_4[3]" @mouseenter="hoverNub = 3"/></el-tooltip>
          </el-col>
          <el-col style="background-color: white" :span="4">
            <el-tooltip placement="bottom" content="研究员"><el-image :src="img_lunbo_4[4]" @mouseenter="hoverNub = 4"/></el-tooltip>
          </el-col>
        </el-row>
      </el-carousel-item>

      <el-carousel-item class="lunbo-5">
        <div class="div1-3" style="background-color: white">
          <h3 v-if="hoverNub===0">12312332123132123</h3>
          <h3 v-else-if="hoverNub===1">资源管理系统</h3>
        </div>
        <el-row :gutter="20" :justify="'space-evenly'" style="margin-left: 50%;width: 550px;height: 50px;margin-top: 5%">
          <el-col style="background-color: white" :span="5">
            <el-tooltip placement="bottom" content="图书馆"><el-image :src="img_lunbo_5[0]" @mouseenter="hoverNub = 0"/></el-tooltip>
          </el-col>
          <el-col style="background-color: white" :span="5">
            <el-tooltip placement="bottom" content="科研系统"><el-image :src="img_lunbo_5[1]" @mouseenter="hoverNub = 1"/></el-tooltip>
          </el-col>
        </el-row>
      </el-carousel-item>

      <el-carousel-item class="lunbo-6">
        <div class="div1-2" style="margin-left: 5%;background-color: white">
          <h3 v-if="hoverNub===0">12312332123132123</h3>
          <h3 v-else-if="hoverNub===1">i国际航空联合会客户</h3>
          <h3 v-else-if="hoverNub===2">啊实打阿发发士大夫</h3>
          <h3 v-else-if="hoverNub===3">大师傅士大夫山豆根规划</h3>
        </div>
        <el-row :gutter="20" :justify="'space-evenly'" style="margin-left: 4%;width: 550px;height: 50px;margin-top: 5%">
          <el-col style="background-color: white" :span="4">
            <el-tooltip placement="bottom" content="人事系统"><el-image :src="img_lunbo_6[0]" @mouseenter="hoverNub = 0"/></el-tooltip>
          </el-col>
          <el-col style="background-color: white" :span="4">
            <el-tooltip placement="bottom" content="教务系统"><el-image :src="img_lunbo_6[1]" @mouseenter="hoverNub = 1"/></el-tooltip>
          </el-col>
          <el-col style="background-color: white" :span="4">
            <el-tooltip placement="bottom" content="评价"><el-image :src="img_lunbo_6[2]" @mouseenter="hoverNub = 2"/></el-tooltip>
          </el-col>
          <el-col style="background-color: white" :span="4">
            <el-tooltip placement="bottom" content="财务管理"><el-image :src="img_lunbo_6[3]" @mouseenter="hoverNub = 3"/></el-tooltip>
          </el-col>
        </el-row>
      </el-carousel-item>

      <el-carousel-item class="lunbo-7">
        <div class="div1-3" style="margin-left: 55%;background-color: white">
          <h3 v-if="hoverNub===0">12312332123132123</h3>
          <h3 v-else-if="hoverNub===1">i国际航空联合会客户</h3>
        </div>
        <el-row :gutter="20" :justify="'space-evenly'" style="margin-left: 55%;width: 550px;height: 50px;margin-top: 5%">
          <el-col style="background-color: white" :span="4">
            <el-tooltip placement="bottom" content="OA系统"><el-image :src="img_lunbo_7[0]" @mouseenter="hoverNub = 0"/></el-tooltip>
          </el-col>
          <el-col style="background-color: white" :span="4">
            <el-tooltip placement="bottom" content="教学评价"><el-image :src="img_lunbo_7[1]" @mouseenter="hoverNub = 1"/></el-tooltip>
          </el-col>
        </el-row>
      </el-carousel-item>

      <el-carousel-item class="lunbo-8">
        <div class="div1-3" style="margin-left: 35%;background-color: white">
          <h3 v-if="hoverNub===0">12312332123132123</h3>
          <h3 v-else-if="hoverNub===1">i国际航空联合会客户</h3>
          <h3 v-else-if="hoverNub===2">啊实打阿发发士大夫</h3>
        </div>
        <el-row :gutter="20" :justify="'space-evenly'" style="margin-left: 35%;width: 550px;height: 50px;margin-top: 5%">
          <el-col style="background-color: white" :span="4">
            <el-tooltip placement="bottom" content="人事系统"><el-image :src="img_lunbo_8[0]" @mouseenter="hoverNub = 0"/></el-tooltip>
          </el-col>
          <el-col style="background-color: white" :span="4">
            <el-tooltip placement="bottom" content="教务系统"><el-image :src="img_lunbo_8[1]" @mouseenter="hoverNub = 1"/></el-tooltip>
          </el-col>
          <el-col style="background-color: white" :span="4">
            <el-tooltip placement="bottom" content="评价"><el-image :src="img_lunbo_8[2]" @mouseenter="hoverNub = 2"/></el-tooltip>
          </el-col>
        </el-row>
      </el-carousel-item>

      <el-carousel-item class="lunbo-9">
        <div class="div1-3" style="margin-left: 52%;background-color: white">
          <h3 v-if="hoverNub===0">12312332123132123</h3>
          <h3 v-else-if="hoverNub===1">i国际航空联合会客户</h3>
          <h3 v-else-if="hoverNub===2">啊实打阿发发士大夫</h3>
          <h3 v-else-if="hoverNub===3">大师傅士大夫山豆根规划</h3>
        </div>
        <el-row :gutter="20" :justify="'space-evenly'" style="margin-left: 52%;width: 550px;height: 50px;margin-top: 5%">
          <el-col style="background-color: white" :span="4">
            <el-tooltip placement="bottom" content="就业"><el-image :src="img_lunbo_9[0]" @mouseenter="hoverNub = 0"/></el-tooltip>
          </el-col>
          <el-col style="background-color: white" :span="4">
            <el-tooltip placement="bottom" content="招生"><el-image :src="img_lunbo_9[1]" @mouseenter="hoverNub = 1"/></el-tooltip>
          </el-col>
          <el-col style="background-color: white" :span="4">
            <el-tooltip placement="bottom" content="推荐"><el-image :src="img_lunbo_9[2]" @mouseenter="hoverNub = 2"/></el-tooltip>
          </el-col>
          <el-col style="background-color: white" :span="4">
            <el-tooltip placement="bottom" content="测试"><el-image :src="img_lunbo_9[3]" @mouseenter="hoverNub = 3"/></el-tooltip>
          </el-col>
        </el-row>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup>
import {reactive, ref} from "vue";
import img_lunbo_2_1 from '@/assets/教务管理系统/培训指导.png'
import img_lunbo_2_2 from '@/assets/教务管理系统/定制.png'
import img_lunbo_2_3 from '@/assets/教务管理系统/数字改造.png'
import img_lunbo_2_4 from '@/assets/教务管理系统/文件.png'
import img_lunbo_2_5 from '@/assets/教务管理系统/笔记.png'
import img_lunbo_3_1 from '@/assets/学生管理系统/OA系统.png'
import img_lunbo_3_2 from '@/assets/学生管理系统/教学评价.png'
import img_lunbo_3_3 from '@/assets/学生管理系统/校历.png'
import img_lunbo_3_4 from '@/assets/学生管理系统/考核.png'
import img_lunbo_3_5 from '@/assets/学生管理系统/财务管理.png'
import img_lunbo_4_1 from '@/assets/毕业生系统/就业.png'
import img_lunbo_4_2 from '@/assets/毕业生系统/招生.png'
import img_lunbo_4_3 from '@/assets/毕业生系统/推荐.png'
import img_lunbo_4_4 from '@/assets/毕业生系统/测试.png'
import img_lunbo_4_5 from '@/assets/毕业生系统/研究生.png'
import img_lunbo_5_1 from '@/assets/资源管理系统/图书馆 (1).png'
import img_lunbo_5_2 from '@/assets/资源管理系统/科研系统 (1).png'
import img_lunbo_6_1 from '@/assets/教职工管理系统/人事系统.png'
import img_lunbo_6_2 from '@/assets/教职工管理系统/评价.png'
import img_lunbo_6_3 from '@/assets/教职工管理系统/教务系统.png'
import img_lunbo_6_4 from '@/assets/教职工管理系统/财务管理 (1).png'
import img_lunbo_7_1 from '@/assets/校园安全管理系统/人脸识别 (1).png'
import img_lunbo_7_2 from '@/assets/校园安全管理系统/门禁.png'
import img_lunbo_8_1 from '@/assets/食堂用餐管理系统/组 4.png'
import img_lunbo_8_2 from '@/assets/食堂用餐管理系统/30fbsp.png'
import img_lunbo_8_3 from '@/assets/食堂用餐管理系统/送餐.png'
import img_lunbo_9_1 from '@/assets/宿舍管理系统/fufeijilu.png'
import img_lunbo_9_2 from '@/assets/宿舍管理系统/宿舍.png'
import img_lunbo_9_3 from '@/assets/宿舍管理系统/衣物洗护.png'
import img_lunbo_9_4 from '@/assets/宿舍管理系统/钥匙证件.png'


// 全局设置
const hoverNub = ref(0)

// 2号轮播图设置
const img_lunbo_2 = reactive([img_lunbo_2_1, img_lunbo_2_2, img_lunbo_2_3, img_lunbo_2_4, img_lunbo_2_5])
// 3号轮播图设置
const img_lunbo_3 = reactive([img_lunbo_3_1, img_lunbo_3_2, img_lunbo_3_3, img_lunbo_3_4, img_lunbo_3_5])
// 4号轮播图设置
const img_lunbo_4 = reactive([img_lunbo_4_1, img_lunbo_4_2, img_lunbo_4_3, img_lunbo_4_4, img_lunbo_4_5])
// 5号轮播图设置
const img_lunbo_5 = reactive([img_lunbo_5_1, img_lunbo_5_2])
// 6号轮播图设置
const img_lunbo_6 = reactive([img_lunbo_6_1, img_lunbo_6_2, img_lunbo_6_3, img_lunbo_6_4])
// 7号轮播图设置
const img_lunbo_7 = reactive([img_lunbo_7_1, img_lunbo_7_2])
// 8号轮播图设置
const img_lunbo_8 = reactive([img_lunbo_8_1, img_lunbo_8_2, img_lunbo_8_3])
// 9号轮播图设置
const img_lunbo_9 = reactive([img_lunbo_9_1, img_lunbo_9_2, img_lunbo_9_3, img_lunbo_9_4])
</script>

<style scoped>
/* 轮播图背景 */
.lunbo-1{background-image: url(../../assets/首页图库/背景-1.png);}
.lunbo-2{background-image: url(../../assets/首页图库/背景-2.png);}
.lunbo-3{background-image: url(../../assets/首页图库/背景-3.png);}
.lunbo-4{background-image: url(../../assets/首页图库/背景-4.png);}
.lunbo-5{background-image: url(../../assets/首页图库/背景-5.png);}
.lunbo-6{background-image: url(../../assets/首页图库/背景-6.png);}
.lunbo-7{background-image: url(../../assets/首页图库/背景-7.png);}
.lunbo-8{background-image: url(../../assets/首页图库/背景-8.png);}
.lunbo-9{background-image: url(../../assets/首页图库/背景-9.png);}

/* 图内内容设置 1 */
.div1-1{
  margin-top: 50px;
  margin-left: 55%;
  width: 500px;
  height: 200px;
  border-radius: 25px;
  background-color: rgb(255,148,23);
}
.font{
  font-size: 5em;
  margin-left: 57%;
  margin-top: 15%;
}
.font-s{
  font-size: 2em;
  /*margin-top: -5%;*/
  margin-left: 65%;
}
.font-nr{
  margin-left: 10%;
  margin-top: 20px;
}

/* 图内内容设置 2 */
.div1-2{
  margin-top: 10%;
  margin-left: 10%;
  width: 550px;
  height: 200px;
  border-radius: 25px;
  background-color: rgb(255,148,23);
}

/* 图内内容设置 3 */
.div1-3{
  margin-top: 10%;
  margin-left: 50%;
  width: 550px;
  height: 200px;
  border-radius: 25px;
  background-color: rgb(255,148,23);
}
/* 其他全体设置 */
.LunBoClass{
  height: 652px;
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 20px;
}
.el-col:hover{
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
</style>
